<script setup>
import {ref, computed, onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 查询表单数据
const queryForm = ref({
  userAccount: '',
  steps: ''
})
//当前id
const id=ref(1)
// 表格数据
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 排序后的表格数据
const sortedTableData = computed(() => {
  // 深拷贝原始数据
  const data = [...tableData.value]
  // 按照步数从高到低排序
  return data.sort((a, b) => b.steps - a.steps)
})
// 获取奖牌图标
const getMedalIcon = (index) => {
  if (index === 0) return '🥇'
  if (index === 1) return '🥈'
  if (index === 2) return '🥉'
  return ''
}

// 重置查询条件
const handleReset = () => {
  queryForm.value = {
    userAccount: '',
    steps: '8000'
  }
}
// 刷新数据
const handleQuery =  () => {
  try {
    //实现查询逻辑
    axios.get(`/health/getHealth/1/${currentPage.value}/${pageSize.value}`).then((response) => {
      console.log(response.data);
      total.value = response.data.total;
      tableData.value = response.data.data;
    })
    // ElMessage.success('获取成功')
  } catch (error) {
    ElMessage.error('获取失败')
  }
}
const  index=()=>{
  try {
    axios.post(`/health/getHealthData/${currentPage.value}/${pageSize.value}`,queryForm.value).then(response => {
      total.value = response.data.total;
      tableData.value = response.data.data;
    })
    // ElMessage.success('查询成功')
  } catch (error) {
    ElMessage.error('查询失败')
  }
}
// 导出数据
const exportData = () => {
  // axios.get(`/health//download/1/${currentPage.value}/${pageSize.value}`).then((response) => {
  location.href = `http://localhost:8080/health/download/1/${currentPage.value}/${pageSize.value}`;
  ElMessage.success('导出成功');
}
// 查看明细
const viewDetails = (row) => {
  // TODO: 实现查看明细逻辑
  axios.get(`/health/walk/1/$(row.userAccount)/${currentPage.value}/${pageSize.value}`).then((response) => {

  })

}

// 格式化数字
const formatNumber = (num) => {
  return num.toLocaleString()
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  handleQuery()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  handleQuery()
}

onMounted(()=>{
  handleReset();
  handleQuery();
})
</script>

<template>
  <div class="health-data-container">
    <div class="query-conditions">
      <h3 class="section-title">查询条件</h3>
      <el-form :model="queryForm" label-width="80px" label-position="left">
        <el-row :gutter="20" align="middle">
          <el-col :span="5">
            <el-form-item label="账户：" class="compact-form-item">
              <el-input
                  v-model="queryForm.userAccount"
                  placeholder="请输入账户"
                  class="compact-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="步数：" class="compact-form-item">
              <el-select
                  v-model="queryForm.steps"
                  placeholder="请选择"
                  class="compact-input"
              >
                <el-option label="8000步以上" value="8000"/>
                <el-option label="5000步以上" value="5000"/>
                <el-option label="3000步以上" value="3000"/>
                <el-option label="所有数据" value="0"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="button-group">
              <el-button type="primary" @click="handleReset">重置</el-button>
              <el-button type="primary" @click="index">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-header">
        <h3 class="section-title">数据列表</h3>
        <el-button type="primary" @click="exportData" :disabled="!tableData.length">
          导出数据
        </el-button>
      </div>
      <el-table
          :data="sortedTableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column prop="userAccount" label="用户账号" width="150">
          <template #default="{ $index, row }">
            {{ getMedalIcon($index) }} {{ row.userAccount }}
          </template>
        </el-table-column>
        <el-table-column prop="userNickname" label="用户昵称" width="150"/>
        <el-table-column prop="steps" label="走步步数" width="120" align="right">
          <template #default="{ row }">
            {{ formatNumber(row.steps) }}
          </template>
        </el-table-column>
        <el-table-column prop="distance" label="走步距离" width="120" align="right"/>
        <el-table-column prop="duration" label="走步时长" width="120" />
        <el-table-column prop="calories" label="消耗热量" width="120" align="right"/>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="text" @click="viewDetails(row)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[1,3,5,10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.health-data-container {
  padding: 20px;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.query-conditions {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-title {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.compact-form-item {
  margin-bottom: 0;
}

.compact-input {
  width: 100%;
}

.compact-date-picker {
  width: 100%;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.data-list {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>